import React, {useState, memo} from 'react';
import {Text, StyleSheet} from 'react-native';
import {Button, Card, Flex, Modal, Toast} from '@ant-design/react-native';
import NumbericInputItem from '@/rcomponents/numbericInputItem';
import FlexTextField from '@/rcomponents/flexTextField';

const styles = StyleSheet.create({
  partNo: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  barcode: {
    color: '#09BEEE',
    fontSize: 16,
    textAlign: 'right',
  },
  specialReason: {
    color: 'red',
    fontSize: 17,
    paddingHorizontal: 20,
  },
});

export default memo(({partItems, qtylabel, onQtyAdjust}) => {
  const [adjustVis, setAdjustVis] = useState({visible: false, item: {}});
  const itemQtyLabel = qtylabel || '数量';
  return (
    <>
      {partItems.map((partItem) => (
        <Card key={partItem.id}>
          <Card.Header
            title={<Text style={styles.partNo}>{partItem.part_no}</Text>}
            extra={<Text style={styles.barcode}>{partItem.barcode}</Text>}
          />
          <Card.Body>
            <Flex>
              {!!partItem.serial_no && (
                <FlexTextField label="序号" fieldValue={partItem.serial_no} />
              )}
              <FlexTextField
                label="系统批次号"
                fieldValue={partItem.batch_no}
              />
              {!partItem.serial_no && (
                <FlexTextField label="原架位" fieldValue={partItem.rack_no} />
              )}
            </Flex>
            <Flex>
              {!!partItem.serial_no && (
                <FlexTextField label="原架位" fieldValue={partItem.rack_no} />
              )}
              <FlexTextField label="名称" fieldValue={partItem.name} />
            </Flex>
            {!!partItem.special_reason && (
              <Flex>
                <Text style={styles.specialReason}>
                  {partItem.special_reason}
                </Text>
              </Flex>
            )}
          </Card.Body>
          <Card.Footer
            content={
              <Flex>
                <Text>{itemQtyLabel}</Text>
                <Text style={styles.fieldText}>{partItem.qty}</Text>
              </Flex>
            }
            extra={
              <Button
                size="small"
                type="warning"
                onPress={() => {
                  setAdjustVis({
                    visible: true,
                    item: partItem,
                  });
                }}>
                调整数量
              </Button>
            }
          />
        </Card>
      ))}
      <Modal
        transparent
        visible={adjustVis.visible}
        footer={[
          {
            text: '取消',
            onPress: () => {
              setAdjustVis({visible: false, item: {}});
            },
          },
          {
            text: '确定',
            onPress: () => {
              if (adjustVis.visible) {
                if (adjustVis.item.qty === '') {
                  Toast.fail('请填写实际数量值');
                  return;
                } else {
                  onQtyAdjust(adjustVis.item.id, adjustVis.item.qty);
                  setAdjustVis({visible: false, item: {}});
                }
              }
            },
          },
        ]}>
        <Flex>
          <FlexTextField label="件号" fieldValue={adjustVis.item.part_no} />
        </Flex>
        <Flex>
          <FlexTextField
            label="系统批次号"
            fieldValue={adjustVis.item.batch_no}
          />
        </Flex>
        <Flex>
          <FlexTextField
            label="可用数量"
            fieldValue={adjustVis.item.stock_qty}
          />
        </Flex>
        <NumbericInputItem
          value={adjustVis.item.qty}
          autoFocus
          minValue={0}
          maxValue={adjustVis.item.stock_qty}
          onChange={(val) => {
            let num = val;
            if (val) {
              num = Number(val);
              if (Number.isNaN(num)) {
                num = '';
              }
            }
            setAdjustVis({
              ...adjustVis,
              item: {...adjustVis.item, qty: num},
            });
          }}
          label={itemQtyLabel}
        />
      </Modal>
    </>
  );
});
